<template>
  <div class="list">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon name="search" size="15" />
      </template>
    </van-nav-bar>
    <div class="list-z" v-for="item in list" :key="item.id">
      <van-switch v-model="checked" size="24px" class="clao" />
      <div class="list-z-z">
        <img :src="item.thumb_path" alt="" class="pp" />
      </div>
      <div class="list-y">
        <div class="list-y-s">
          <p class="title">{{ item.title }}</p>
        </div>
        <div class="list-y-x">
          <span class="price">￥{{ item.sell_price }}</span>
          <van-stepper v-model.number="item.more_data.coust" integer />
          <span class="delindex" @click="btnFn(item.id)">删除</span>
        </div>
      </div>
    </div>
    <!-- 总计 -->
    <div class="list-zong">
      <div class="list-zb">
        <h2 class="zong">总计(不含运费):</h2>
        <span class="shang"
          >已经选择商品{{ select }}件,总价为：￥{{ totalPrice }}元</span
        >
      </div>

      <div class="list-yb">
        <button class="jiesuan">去结算</button>
      </div>
    </div>
    <van-empty description="去购买一件商品把" v-if="list.length === 0" />
  </div>
</template>

<script>
import { getshopcarlistData } from "../apis/api";
import { getUserId, setUserId } from "../utils/locaIdata";
import eventBus from "../utils/eventBus";
export default {
  data() {
    return {
      value: 1,
      list: [],
      checked: true,
      select: 1,
      totalPrice: 0,
    };
  },
  async created() {
    //获取本地数据id
    const res = getUserId();
    console.log(res);
    // 遍历获取,id要用逗号隔开
    let idslist = res.map((item) => item.id).join(",");
    if (res.length === 0) {
      this.list = [];
      return;
    }
    console.log(idslist);
    const listData = getUserId();
    console.log("获取数字", listData);
    // // 遍历获取,id要用逗号隔开
    // let idslists = res.map((item)=>item.coust).join(",")
    // if(res.length===0){
    //   this.list=[]
    //   return
    // }
    // console.log(idslists);

    //获取数据
    const res2 = await getshopcarlistData(idslist);
    console.log(res2);
    // 给到数组渲染数据
    this.list = res2.message;
    //得到的数据...item展开数据
    //more_data:{} 然后以一个数组的对象加进去数据里面

    this.list = this.list.map((item) => ({
      ...item,
      more_data: {},
    }));
    console.log(this.list);
    //然后遍历数组对比大小，然后不排列
    res.forEach((item) => {
      this.list.forEach((item2, index2) => {
        if (Number(item.id) === Number(item2.id))
          this.list[index2].more_data = item;
      });
    });
    // console.log(this.list);
  },
  methods: {
    btnFn(itemId) {
      console.log(itemId);
      //获取本地的数据
      const oldloca = getUserId();
      console.log(oldloca);
      //然后过滤掉要删除的id
      const lists = oldloca.filter(
        (item) => Number(item.id) !== Number(itemId)
      );

      setUserId(lists);
      //然后在添加回去数组里面
      this.list = this.list.filter((item) => item.id !== itemId);

      // this.list.unshift(lists)

      // this.list = lists
      console.log(this.list);
    },
  },
  watch: {
    //监听数组变化
    // list:{
    //   deep:true,
    //   handler(val){
    //     console.log(val);
    // const redsq = getUserId()
    // console.log(redsq);
    // //计算选中商品件数
    // this.select=val.reduce((total,num)=>{
    //   if(num.more_data.select) return total+num.more_data.select;
    //   return total
    // },0)
    //  // 计算总价
    //         this.totalPrice = val.reduce((total, num) => {
    //           if (num.more_data.selected)
    //             return total + num.more_data.count * num.sell_price;
    //           return total;
    //         }, 0);
    // this.list = this.select
    // }
    // }
    list: {
      deep: true,
      handler(val) {
        console.log(val);
        this.totalPrice = val.reduce((total, item) => {
          return (total += item.sell_price * item.more_data.coust);
        }, 0);
        console.log(this.totalPrice);
        this.select = val.reduce((total, item) => {
          return (total += item.more_data.coust);
        }, 0);
        //传数据出去
        eventBus.$emit("Mybottom", this.select);
      },
    },
  },
};
</script>

<style lang="less" scoped>
div.list {
  div.list-zong {
    position: fixed;
    bottom: 60px;
    left: 5px;
    // top: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
    width: 365px;
    margin-top: 15px;
    div.list-zb {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      h2.zong {
        font-size: 20px;
      }

      span.shang {
        font-size: 15px;
      }
    }

    div.list-yb {
      button.jiesuan {
        background-color: rgb(247, 83, 43);
        border: none;
        color: #fff;
        height: 50px;
        margin-left: 15px;
        // width: 15px;
      }
    }
  }
  padding: 0 5px 50px 5px;
  van-nav-bar {
    template {
    }
  }

  div.list-z {
    border-bottom: 1px solid rgb(148, 146, 146);
    margin-bottom: 15px;
    .clao {
      margin-top: 50px;
    }
    // background-color: red;
    height: 150px;
    display: flex;

    div.list-z-z {
      // display: flex;
      // background-color: aqua;
      width: 100px;
      height: 100px;
      // line-height: 100px;
      margin-top: 25px;
      .pp {
        // border: 1px solid red;
        width: 80%;
        // height: 50%;
      }

      van-switch {
        margin-top: 15px;
      }
    }

    div.list-y {
      // background-color: aquamarine;
      width: 230px;
      height: 150px;
      div.list-y-s {
        // background-color: yellow;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 26px;
        p.title {
          font-size: 15px;
          color: aqua;
        }
      }

      div.list-y-x {
        margin-top: 30px;
        // background-color: violet;
        display: flex;
        align-items: center;
        justify-content: center;
        span.price {
          color: red;
          margin-right: 15px;
        }

        span.delindex {
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
